<template>
  <div class="container">
    <h3>首页</h3>
    <h4>同域资源</h4>
    <div>{{title}}</div>

    <h4>跨域资源</h4>

    <h3>vuex操作</h3>
    <button @click="getStore">编程式</button>

    <div>index getters:{{getNav}}</div>
    <div>index state:{{bNav}}</div>
     
     <div>全局日期过滤器:{{1625645206| date}} {{ 4 | fillzero}}</div>

     <hr>
     <div v-direc1="'red'">{{title}}</div>
     <div v-direc2>direct2</div>
     <div>全局组件: <uc-button></uc-button></div>

     <h4>内部资源指向 </h4>
     <!-- 相对路径找到需要压缩的资源 -->
     <img src="../assets/img/cat.jpeg" alt="">
     <!-- 绝对路径找到不需要压缩的资源 -->
     <img src="/img/test.jpg" alt="">
     <div class="bgimg">css指向需要压缩的资源</div>
     <h4>外部资源</h4>
     <el-button onclick="alert($)">测试jq脚本</el-button>
     
  </div>
</template>

<script>
import {mapActions,mapGetters,mapState,mapMutations} from 'vuex'
export default {
  middleware(){
    
  },
  validate({params,query}){
    // console.log('middleware validate');
    return true
  },
  async mounted(){
  },
  //读数据，返回给组件
  async asyncData({$axios}){
    let res = await $axios({url:'/data/list'})
    console.log(555,res);

    let res2 = await $axios({url:'/home'})
    // console.log('res2=>',res2);
     return {
      title:res.title
    }
  },
  //读数据，返回给vuex
  async fetch({$axios}){
    // let res = await $axios({url:'/data/list.json'})
    // console.log(res.data.title,'nuxt Data');
  },
  data(){
    return {
      a:1,
      title:'数据'
    }
  },
  computed:{
    xx(){},
    ...mapGetters(['getNav']),
    ...mapState(['bNav'])
  },
  methods:{
    getStore(){
      this.A_UPDATE_USER({err:0,msg:'登录成功',token:'假token',data:{title:'123'}})
      //vuex
      //action请求
      // this.$store.dispatch('user/A_UPDATE_USER',{err:0,msg:'登录成功',token:'假token',data:{title:'user模块 acction 传递数据'}})
      //mutation请求
      // this.$store.commit('user/M_UPDATE_USER',{err:0,msg:'登录成功',token:'假token',data:{title:'组件携带的数据'}})
      // this.M_UPDATE_USER({err:0,msg:'登录成功',token:'假token',data:{title:'456'})
    },

    ...mapActions('user',['A_UPDATE_USER']),
    ...mapMutations('user',['M_UPDATE_USER'])
  },

}
</script>
<style lang="scss" scoped>
.bgimg{
  height:500px;
  background: url('~assets/img/cat.jpeg') no-repeat
}
.container{
  height: 2000px;
}
</style>
